<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>rem版的移动布局方案</title>
    <script type="text/javascript" src="moblie-js/jquery-2.0.3.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <!--在使用rem方案的时候，设计师设计尽量最大的页面效果图，例如720像素的基本可以适应所有的移动端的设备-->
    <!--整体布局默认是不设置宽度的，就直接让它100%，铺满整个屏幕就OK了-->
    <!--小布局都是rem为单位的，大于720像素的时候，没有变化，但是一旦小于720像素的时候，等比例的缩放，这点跟移动端不考虑放大，考虑缩小的原则是一致的-->
    <!--图片只设置width:100%,其余不用设置，自适应盒子的大小-->
    <!--文字依然以rem为单位，等比例的放大，缩小-->
    <!--所有的布局均使用flex布局来用,不再使用width百分比，float布局了-->
    <script>
        /*默认情况下，一个手机的视图窗口是980像素，这是为了照顾那些在手机端看PC页面的用户*/
        /*这里我们使用viewport width=deivce-width 将窗口的像素调整为设备的像素，也就是手机真实的分辨率*/
        /*然后，我们将页面设置为不允许用户进行缩放，因为默认情况下，视图的窗口可以在用户双击或者两个手指拖动的时候进行放大和缩小，这里我们禁止掉了*/
        /*alert(window.innerWidth);*/
        /*在没有高清屏的时候，那么，屏幕的物理像素是320，独立像素也是320，window.devicePixelRatio 就是1 */
        /*但是在高清屏的时候，屏幕的物理像素是640，独立像素是320,所以window.devicePixelRatio 就是2 */
        /*打个比方，苹果的独立像素是414,它的devicePixelRatio是3，那么它的实际分辨率就应该是1214像素*/
        /*实际，我们在做页面的时候，只是考虑它的独立像素就可以了，至于它究竟实际的像素多大其实并没有关系，毕竟它就显示414像素的大小而已，只不过更加高清了*/
        /*alert(window.devicePixelRatio);*/
    </script>
    <style>
        * {
            box-sizing: border-box;
            margin:0;
            padding:0;
            border:0;
        }
        html {
            /*这个来作为rem的参考点*/
            /*这里让学生试试12,13为什么不行？因为谷歌浏览器的最小字体是12px，所以，没办法设置小于这个字体的大小*/
            /*font-size:100px;*/
        }
        body {
            /*常用的文字字体的大小*/
            font-size:.2rem;
            color:#333;
            margin:0;
            padding:0;
            border:0;
        }
        img {
            width:100%;
            vertical-align: middle;
        }
        a {
            text-decoration: none;
            color:#333;
        }
        ol,ul {
            list-style:none;
        }
        /*所有的效果图的大小都是720像素的，每个布局的大小都是按照720像素的大小来设置的，我们只考虑720下面的情况就OK了*/
        /*所有的小布局都是按照720的效果去设计的,它多大，取决于设计师的设计,完美的在720的情况下展示就OK了*/
        /*全局的大的包裹框设置height为100% */
        #wrapper {
            position:relative;
            z-index:2;
            height:100%;
            padding-bottom: 1rem;
        }
        /*------------------------------------------------------整体布局--------------------------------------------------------*/
        /*TOP*/
        #fullimg {
            position: relative;
        }
        /*search*/
        #search {
            padding:0 0 .1rem;
        }
        /*banner*/
        #banner {
            /*所有的大图都是按照720设计好的*/
            height:3.6rem;
            visibility: visible;
        }
        /*list*/
        #list {
            /*正文的内容*/

        }
        /*footer*/
        #footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #FFF;
            z-index: 99;
            border-top: 1px solid #e0e0e0;
        }


        /*--------------------------------------------------小布局--------------------------------------------------------------*/
        /*满屏的图片*/
        #fullimg a {
            display:block;
        }
        #fullimg .close {
            position: absolute;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            right: 0;
            top: 50%;
            margin-top: -.5rem;
        }
        #fullimg .close a {
            display:block;
        }
        #fullimg .close a img {
            width:30%;
        }

        /*满屏的搜索*/
        #search .search-box {
            line-height: .34rem;
        }
        #search .search-box a {
            display: block;
            padding: .2rem .3rem .12rem;
        }
        #search .search-box a .text {
            font-size: .3rem;
            color: #9C9C9C;
        }
        #search .search-bottom {
            border: 1px solid #E3E3E3;
            margin: 0 .2rem;
            height: .08rem;
            border-top: 0;
        }
        /*flex布局的固定的底部布局*/
        #footer ul {
            display:flex;
            /*横轴上居中*/
            justify-content: center;
            /*纵轴也居中*/
            align-items: center;
        }
        #footer ul li {
            flex:1;
            text-align:center;
        }
        #footer ul li a {
            display: block;
            padding: .12rem 0;
        }
        #footer ul li a .nav .ih {
            background-position-y: -2.4rem;
            width: .4rem;
            height: .4rem;
            background-image: url(http://s1.mi.com/m/images/m/spr1.png);
            background-size: .4rem 3.2rem;
            overflow: hidden;
            margin: 0 auto .08rem;
        }
        #footer ul li a .nav p {
            font-size: .22rem;
            line-height: .8;
            color: #999;
        }
        /*列表中的产品列表，内部采用flex布局*/
        #list .items {
            display:flex;
            justify-content: center;
            padding: .3rem 0;
            border-bottom: 1px solid #F2F2F2;
        }
        #list .items .img {
            width: 2.54rem;
            height: 1.45rem;
            position: relative;
        }
        #list .items .info {
            flex:1;
            margin-right: .2rem;

        }
        #list .items .info .name {
            font-size: .3rem;
            color: #000;
            margin-bottom: .1rem;
        }
        #list .items .info .des {
            font-size: .26rem;
            line-height: .34rem;
            color: #969696;
            margin-bottom: .12rem;
        }
        #list .items .info .price {
            font-size: .28rem;
            color: #FE4900;
        }
        /*图片的高度也要设置*/
        #banner img {
            height:3.6rem;
        }


    </style>
</head>
<body>
<div id="wrapper">
    <div id="fullimg">
        <a href="#"><img src="http://s1.mi.com/m/images/20151027/ios.png"></a>
        <div class="close"><a href="#"><img src="http://s1.mi.com/m/images/20151028/top-x.png"></a></div>
    </div>
    <div id="search">
        <div class="search-box">
            <a href="#">
                <span class="icon icon-search"></span>
                <span class="text">搜索商品名称</span>
            </a>
        </div>
        <div class="search-bottom"></div>
    </div>
    <div id="banner">
        <a href="#"><img src="http://i8.mifile.cn/v1/a1/T17fh_BvVv1RXrhCrK!720x360.jpg"></a>
    </div>
    <div id="list">
        <div class="items">
            <div class="img">
                <img class="ico lazy" src="http://i8.mifile.cn/v1/a1/T14xJTByZ_1RXrhCrK.jpg">
            </div>
            <div class="info">
                <div class="name">
                    <p>小米手机5</p>
                </div>
                <div class="des">
                    <p>【每天10点开售】骁龙820处理器 / 4GB 内存 / 128GB 闪存 / 4轴防抖相机 / 3D陶瓷机身</p>
                </div>
                <div class="price">
                    <p>1999元 起</p>
                </div>
            </div>
        </div>
        <div class="items">
            <div class="img">
                <img class="ico lazy" src="http://i8.mifile.cn/v1/a1/T14xJTByZ_1RXrhCrK.jpg">
            </div>
            <div class="info">
                <div class="name">
                    <p>小米手机5</p>
                </div>
                <div class="des">
                    <p>【每天10点开售】骁龙820处理器 / 4GB 内存 / 128GB 闪存 / 4轴防抖相机 / 3D陶瓷机身</p>
                </div>
                <div class="price">
                    <p>1999元 起</p>
                </div>
            </div>
        </div>
        <div class="items">
            <div class="img">
                <img class="ico lazy" src="http://i8.mifile.cn/v1/a1/T14xJTByZ_1RXrhCrK.jpg">
            </div>
            <div class="info">
                <div class="name">
                    <p>小米手机5</p>
                </div>
                <div class="des">
                    <p>【每天10点开售】骁龙820处理器 / 4GB 内存 / 128GB 闪存 / 4轴防抖相机 / 3D陶瓷机身</p>
                </div>
                <div class="price">
                    <p>1999元 起</p>
                </div>
            </div>
        </div>
        <!--多个items省略-->
    </div>
    <div id="footer">
        <ul>
            <li>
                <a href="#">
                    <div class="nav">
                        <div class="ih"></div>
                        <p>商城</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav">
                        <div class="ih"></div>
                        <p>分类</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav">
                        <div class="ih"></div>
                        <p>购物车</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="nav">
                        <div class="ih"></div>
                        <p>服务</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
<script>
    /*当我们的屏幕发生变化的时候，我们根据当前屏幕的大小跟画布大小的比例来调整布局的大小*/
    /*最终的结果是我们的布局的宽度永远是100%*/
    /*谷歌浏览器可能有点问题，在resize的时候，计算出来的数字可能不准确，不过大体其他的浏览器都是没问题的*/
    $(function(){
        function fullWidth(){
            if($('body').width() >= 720){
                $('html').css('font-size',100 + 'px');
                return ;
            }
            var scale = $('body').width() / 720;
            $('html').css('font-size', 100 * scale + 'px');
        };
        fullWidth();
        $(window).resize(function(){
            fullWidth();
        });
    });
</script>